<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>安装代码</span>
      </div>
      <div class="ele-card--item">
        <label class="ele-card--label">AB页说明</label>
        <div class="ele-card--mid">
          <div style="width: 500px; float: left; margin-top: 10px">
            <div>
              <span style="color: red"
                >真页面请在 &lt;body&gt; 里面增加， data-pages="1"
              </span>
            </div>
            <div>
              <span style="color: red"
                >假页面请在 &lt;body&gt; 里面增加， data-pages="2"
              </span>
            </div>
            <div>
              <span style="color: red"
                >示例， &lt;body data-pages="1" &gt;
              </span>
            </div>
            <div>
              <span style="color: red"
                >如果没有&lt;body&gt;,表示页面不规范,请访问查看标准H5
              </span>
            </div>
            <div>
              <a
                href="https://www.runoob.com/html/html5-intro.html"
                target="_blank"
                >https://www.runoob.com/html/html5-intro.html</a
              >
            </div>
          </div>
        </div>
      </div>

      <div class="ele-card--item">
        <label class="ele-card--label">安装说明</label>
        <div style="height: 200px; font-size: 14px">
          <div style="width: 560px; float: left; margin-top: 10px">
            <div><span style="color: red">支持调用标签</span></div>
            <div>
              &lt;span class="app_wechat"&gt;&lt;/span&gt;
              <span style="padding-left: 20px">微信标签</span>
            </div>
            <div>
              &lt;span class="app_sex"&gt;&lt;/span&gt;
              <span style="padding-left: 20px">性别标签</span>
            </div>
            <div>
              &lt;span class="app_name"&gt;&lt;/span&gt;
              <span style="padding-left: 20px">姓名标签</span>
            </div>
            <div>
              &lt;span class="app_phone"&gt;&lt;/span&gt;
              <span style="padding-left: 20px">手机号标签</span>
            </div>
            <div>
              &lt;span class="app_company"&gt;&lt;/span&gt;
              <span style="padding-left: 20px">底部版权标签</span>
            </div>
            <div>
              &lt;img class="app_qrcode"&gt;&lt;/img&gt;
              <span style="padding-left: 20px">二维码标签,必须是IMG标签</span>
            </div>
            <br />
            <div>
              contenteditable="true"
              <span style="padding-left: 20px">模板上传编辑属性</span>
            </div>
            <br />
            <div>
              竞价落地页示例 http://www.baidu.com/?e_keywordld={keywordid}
            </div>
            <br />

            <div>
              &lt;span class="app_qrcode_view" style="cursor: pointer;" &gt;
              查看二维码 &lt;/span&gt;
            </div>
            <div>
              &lt;img class="app_qrcode_view"
              src="http://travel.jiafen520.com/qr/77f603b9478a234b7b8aaa2fa3757f41b0e8df02.png"
              align="middle"
              style="cursor:pointer;vertical-align:top;width:auto;">
            </div>
            <br />
            <div>
              &lt;div id="app_comment"&gt;&lt;/div&gt;
              <span style="padding-left: 20px">评论框,必须是DIV</span>
            </div>
            <br />
          </div>
          <div style="float: left; margin-left: 30px; margin-top: 10px">
            <div>
              <span style="color: red"
                >页面调用样式 下面代码请放在.css里面</span
              >
            </div>
            <div>
              font-weight:normal;
              <span style="padding-left: 20px">正常字体</span>
            </div>
            <div>
              font-weight:bold; <span style="padding-left: 20px">字体加粗</span>
            </div>
            <div>
              color: red; <span style="padding-left: 20px">字体颜色</span>
            </div>
            <div>
              font-size: 12px; <span style="padding-left: 20px">字体大小</span>
            </div>
            <div style="padding-top: 10px; padding-bottom: 10px">
              <span style="color: red">组合使用举例</span>
            </div>
            <div
              :style="{
                color: color,
                'font-weight': 'bold',
                'font-size': '14px',
              }"
            >
              .app_wx { font-size: 14px; color: {{ color }}; font-weight:bold; }
            </div>
            <div style="margin-top: 10px">
              <span>代码颜色生成</span>
              <el-color-picker
                v-model="color"
                size="medium"
                @active-change="changePicker"
              ></el-color-picker>
            </div>
          </div>
        </div>
      </div>

      <div class="ele-card--item">
        <label class="ele-card--label">安装代码</label>
        <div style="margin-left: 110px">
          <p style="color: red">
            请把下面代码放置到页面body里面, 建议放置在页面底部&lt;/body&gt;上.
          </p>
          <el-input
            v-model="inputCode"
            ref="inputCode"
            :readonly="true"
            :rows="11"
            style="width: 750px"
            type="textarea"
          />
        </div>
      </div>

      <div class="ele-card--item">
        <div style="margin-left: 110px">
          <el-button type="primary" @click="copyCode">复制代码 </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { messageLoading } from "@/panel";

export default {
  name: "SystemCode",
  created: function () {
    this.query();
  },
  data() {
    return {
      color: "#409EFF",
      inputCode: "",
    };
  },
  methods: {
    changePicker(value) {
      this.color = value;
    },
    select(element) {
      let selectedText;
      if (element.nodeName === "SELECT") {
        element.focus();
        selectedText = element.value;
      } else if (
        element.nodeName === "INPUT" ||
        element.nodeName === "TEXTAREA"
      ) {
        let isReadOnly = element.hasAttribute("readonly");
        if (!isReadOnly) {
          element.setAttribute("readonly", "");
        }
        element.select();
        element.setSelectionRange(0, element.value.length);
        if (!isReadOnly) {
          element.removeAttribute("readonly");
        }
        selectedText = element.value;
      } else {
        if (element.hasAttribute("contenteditable")) {
          element.focus();
        }
        let selection = window.getSelection();
        let range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
        selectedText = selection.toString();
      }
      return selectedText;
    },
    copy(element) {
      try {
        this.select(element);
        return document.execCommand("copy");
      } catch (err) {
        return false;
      }
    },
    copyCode() {
      this.loading = true;
      let result = this.copy(this.$refs.inputCode.$el);
      if (result) {
        this.loading = false;
        return this.$message({
          type: "success",
          message: "已成功复制，可直接去粘贴!",
        });
      }
      this.loading = false;
      this.$message.error("复制失败!");
    },
    query() {
      const loading = messageLoading("正在请求中..");
      this.$http
        .get("sys/info", { params: { t: new Date().getTime() } })
        .then((res) => {
          loading.close();
          if (res.data.code === 0) {
            this.inputCode = res.data.companyId;
          }
        })
        .catch(() => {
          loading.close();
        });
    },
  },
};
</script>

<style scoped>
.ele-card--item {
  margin-bottom: 15px;
  clear: both;
  *zoom: 1;
}

.ele-card--label {
  position: relative;
  float: left;
  display: block;
  padding: 9px 15px;
  width: 80px;
  font-weight: 400;
  line-height: 20px;
  text-align: right;
}
</style>
